<template>
  <div>
    <!-- :inline="true" 表单一行显示 -->
    <el-form
      ref="searchForm"
      :inline="true"
      :model="searchMap"
      style="margin-top: 20px"
    >
      <!-- 重置会看 el-form-item 组件元素的 prop 上是否指定了字段名，指定了才会重置生效 -->
      <el-form-item prop="username">
        <el-input
          v-model="searchMap.username"
          placeholder="帐号"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item prop="name">
        <el-input
          v-model="searchMap.name"
          placeholder="姓名"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" height="380" border style="width: 100%">
      <!-- type="index"获取索引值，从1开始 ，label显示标题，prop 数据字段名，width列宽 -->
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="username" label="帐号"></el-table-column>
      <el-table-column prop="name" label="姓名" width="90"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="mobile" label="电话"></el-table-column>
      <el-table-column prop="salary" label="薪酬"></el-table-column>
      <el-table-column prop="entryDate" label="入职时间"  :formatter="dateFormat"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
    class="fenye"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,5,10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <app-add
      :dialogVisible="dialogVisible"
      :pojo="pojo"
      :closeDialog="closeDialog"
    ></app-add>
  </div>
</template>

<script>
import staffApi from "@/api/staff";
import AppAdd from "./AppAdd";
export default {
  data() {
    return {
      list: [],
      pageSize: 10, // 每页显示条数 10条
      currentPage: 1, // 当前页码
      total: 0, // 总记录数
      searchMap: {},
      // 条件查询的绑定字段值
      dialogVisible: false,
      pojo: {},
    };
  },

  components: { AppAdd },

  created() {
    this.fetchData();
  },
  methods: {
    dateFormat(row, column) {
      let data = row[column.property];
      if (data === null) {
        return "";
      }
      let dt = new Date(data);
      return dt.getFullYear() + "-" + (dt.getMonth() + 1) + "-" + dt.getDate();
    },
    async fetchData() {
      var { data } = await staffApi.search(
        this.currentPage,
        this.pageSize,
        this.searchMap
      );
      this.list = data.rows;
      this.total = data.total;
    },

    // 当每页显示条数改变后，进行调用该方法,val是当前改变后条数
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.fetchData();
    },
    // 切换页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    search() {
      this.currentPage = 1;
      this.fetchData();
    },

    resetForm() {
      this.searchMap = {};
    },
    // 打开新增窗口
    handleAdd() {
      this.dialogVisible = true;
    },

    async handleEdit(id) {
      var resp = await staffApi.getById(id);
      this.pojo = resp.data;
      this.dialogVisible = true;
    },

    closeDialog() {
      this.fetchData();
      this.pojo = {};
      this.dialogVisible = false;
    },

    // 删除操作
    handleDelete(id) {
      this.$confirm("确认删除这条记录吗?", "提示", {
        confirmButtonText: "确认",
        cancleButtonText: "取消",
      }).then(() => {
        staffApi.deleteById(id).then((resp) => {
          //提示更新失败
          this.$message({
            message: resp.message,
            type: resp.flag ? "success" : "error",
          });
          this.fetchData();
        });
      });
    },
  },
};
</script>

<style scoped>
.fenye {
  position: fixed;
  bottom: 0px;
  left: 40%;
}
</style>